<script setup>
import {ref} from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const activeIndex = ref(1);
const List=[
    {
        label:'学校',
        name:'xuexiao',
        id:1
    },
    {
        label:'教务',
        name:'jiaowu',
        id:2
    },
    {
        label:'学院',
        name:'xueyuan',
        id:3
    },
    {
        label:'团委',
        name:'tuanwei',
        id:4
    },
]

const clickMenu = (item,index)=>{
    router.push({
        name:item.name
    })
    activeIndex.value = index
    
}
</script>



<template>
<!-- 顶部菜单 -->
<div class="menu-container">
<!-- 主菜单 -->
    <div class="button-container">
        <button v-for="item in List" :key="item.id" @click="clickMenu(item,item.id)" :class="{active:activeIndex === item.id}">{{ item.label }}</button>
    </div>
</div>


</template>


<style lang="less" scoped>
.button-container{
    display: flex;
    position: sticky;
    top: 0;
    box-sizing: border-box;
    --horizon-menu-height: 40px;
    width: 100%;
    overflow-x: auto;
    background-color: #fff;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .15);
    z-index: 100;
    button{
        background-color: white;
        flex-grow: 1;
        flex-shrink: 1;
        width: 90px;
        height: var(--horizon-menu-height);
        line-height: var(--horizon-menu-height);
        color: #6e6e6e;
        text-decoration: none;
        font-size: 15px;
        text-align: center;
    }
    .active{
        font-weight: 700;
        color:#42b983;
    }
}
</style>